<template>
  <header>
    <div class="songListTitle">

      <h3>{{ title }}</h3>

      <el-dropdown trigger="click" placement="bottom-start">
        <el-button type="primary" plain class="elbtn">
          选择分类<el-icon class="el-icon--right"><arrow-down /></el-icon>
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item 
            v-for="(item, index) in tags" 
            :key="index" 
            @click="changeListSongs(item.name)" 
            :divided="true"
            style="float:left;">
              {{ item.name }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <!-- 搜索歌曲 -->
    <div class="mt-4" v-show="flag">
      <el-input v-model="inputValue" 
      placeholder="请输入搜索的内容：" 
      class="input-with-select" 
      autofocus 
      ref="Refipt" 
      @keyup.enter="searchBtnClick">
        <template #prepend>
          <el-select v-model="optionsValue" placeholder="搜索类型" style="width: 80px">
            <el-option label="歌名" value="1" align="center"/>
            <el-option label="歌手" value="100" align="center"/>
            <el-option label="专辑" value="10" align="center"/>
            <el-option label="歌词" value="1006" align="center"/>
          </el-select>
        </template>
        <template #append>
          <el-button  @click="searchBtnClick">
            <el-icon :size="14">
              <Search/>
            </el-icon>
          </el-button>
        </template>
      </el-input>
    </div>
    <!-- 收藏按钮添加的位置 -->
    <el-button round size="large" v-show="flag" @click="collectSongList()">
      <el-icon size="20px" style="margin-right: 4px;">
        <FolderAdd />
      </el-icon>
      {{ parentMessage ?'已收藏':'收藏' }}
    </el-button>


  </header>
  <hr>

  <!-- 二级router -->
  <!-- tagesofone：将选择的标签传递给子组件 musicId：将子组件点击的歌单id传递给另一个子组件-->
  <!-- 去掉兄弟通讯添加的@changeMusic="changeTags" :music-id="musicId" -->
  <!-- @changeMessage="changeMessage"    改变父组件parentMessage 值的自定义事件 -->
  <router-view 
  :tagesofone="title" 
  :flag="flag" 
  @changeinput="flag = !flag" 
  :optionsValue="optionsValue" 
  :inputValue="inputValue"
  :searchFlag="searchFlag"
  @changeInputValue="this.inputValue=''"
  @changeMessage="changeMessage"
  @changeTitle="changeTitleTag"
  >
  </router-view>
  
</template>
    
<script>
import { ArrowDown,FolderAdd, Search } from '@element-plus/icons-vue'
import { getHighqualityTags } from '@/api/topic'
import { playlistSubscribeInterface } from '@/api/artist'
export default {
  data() {
    return {
      drawer: false,
      input1: "",
      title: "华语",
      tags: [],  //歌单
      flag: false, //用于控制搜索框的显示
      // musicId: {
      //   type: Number
      // } //存放所点击的歌单的id
      // Search,
      // 搜索的选项
      optionsValue: "歌名",  //保存下拉菜单用户选择的内容
      inputValue:"" , //保存用户输入的内容
      searchFlag: false, //用于判断搜索框是否点击了，并传递给子组件      
      // 从本地存储获得的歌单id
      songListId: '',
      // 判断收藏  取消收藏 1:收藏,2:取消收藏
      type: '',
      // 父组件的按钮中的提示信息
      parentMessage: ''
    }
  },
  components: {
    ArrowDown,
    Search,
    FolderAdd
  },
  created() {
    // 获取所有的歌单列表
    getHighqualityTags().then(res => {
      this.tags = res.tags
    });
    this.changeMessage();
  },
  methods: {

    // 获取所有的歌单列表(存在bug，必须放置在created钩子函数中，而不能点击时进行异步请求)
    // checkType() {
    //   getHighqualityTags().then(res => {
    //     this.tags = res.tags
    //   })
    // },
    
    //将点击的类型标签的name放入localStorage中
    changeListSongs(songsListName){
      this.title = songsListName;
      // 将用户所点击的分类标签名，放在localStorage
      localStorage.setItem(`songsListName`,songsListName);
      this.$router.push({name:'highqualitytagsofone'});
    },
    // 子组件改变父组件title的方法
    changeTitleTag(newTitle){
      this.title = newTitle;
    },

    // 给搜索按钮添加点击事件
    searchBtnClick(){
      // 如果用户输入为空，则弹出报错框
      if(!this.inputValue){
        ElMessage.error('请输入搜索的内容')
      }
      else{
        this.searchFlag =!this.searchFlag;  // 将searchFlag取反
      }
    },

    // 收藏/取消收藏歌单
    collectSongList() {
      // 参数type的类型
      // this.type === 1 ? this.type = 2 : this.type = 1
      // 修改 收藏后  等后台数据更新以后，按钮显示已收藏但是点击按钮还是会走收藏，将以上代码改为下列代码
      if (this.parentMessage) {
        this.type = 2
      } else { 
        this.type = 1
      }
      // 从 本地存储中拿到点击的当前的歌单id
      this.songListId = localStorage.getItem(`songListId`);
      if (this.type === 1) {
        ElMessage({
          message: '收藏成功',
          type: 'success',
        })
        this.parentMessage = true
      } else if( this.type===2 ){
        ElMessage({
          message: '取消收藏成功',
          type: 'success',
        })
        this.parentMessage = false
      }
    },
    // 改变父组件 parentMessage 的方法
    changeMessage(msg) {
      this.parentMessage = msg
    },
  },
  // watch 监测参数变化
  watch: {
    type(value) {
      playlistSubscribeInterface({ t: value || '', id: this.songListId || '' }).then(() => {
        // console.log('playlistSubscribeInterface', res)
      }).catch(err => console.log(1111111111111,err))
    }
  }
}
</script>
    
<style lang="scss" scoped>
header {
  .songListTitle{
    float: left;
      h3 {
        margin-right: 20px;
        font-size: 18px;
        display: inline;
      }
      .el-dropdown {
        .elbtn {
          width: 100px;
          padding: 10px;
          margin-bottom: 6px;
          span {
            margin-right: 8px;
          }
        }
      }
  }
  .mt-4{
    float: left;
    margin-left: 21%;
  }
}

// 万能清除法
header::after {
  content: "";
  clear: both;
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}



.el-button--large.is-round {
  position: absolute;
  right: 50px;
  top: 120px;
  line-height: 40px;
}
.el-button--large.is-round:hover {
  background-color: #f2f2f2;
  border-color: none;
  color: #999;
}
</style>